<template>
	<view class="content">
		<text class="title">KIDS BOX</text>
		<text class="text_content">专为4岁-12岁非英语国家儿童出版的一套零起点英语教程。</text>
		<view class="_back">
			<view class="Flex" v-for="(item,index) in 6" :key="index">
				<view class="left">
					<u--image :showLoading="true" src="../../static/Home/yuanquan.png" width="30rpx" height="30rpx"
						radius="0"></u--image>
					<view class="solid"></view>	
				</view>
				<view class="listFlex">
					<view class="listLeft">
						<view>1</view>
						<text>KB0-Review</text>
					</view>
					<u--image :showLoading="true" src="../../static/more.png" width="30rpx" height="30rpx"
						radius="0"></u--image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
</script>

<style>
	page{
		width:100%;
		height:100vh;
		background-image: url('../../static/back.png');
		background-repeat: no-repeat;
	}
</style>
<style scoped lang="scss">
	.content{
		width:100%;
		.title{
			font-family: PingFangSC, PingFang SC;
			font-weight: 600;
			font-size: 40rpx;
			color: #333333;
			display: block;
			margin-bottom:35rpx;
			margin-left:50rpx;
			margin-top:100rpx;
		}
		.text_content{
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			font-size: 24rpx;
			color: #666666;
			margin-left:50rpx;
			margin-bottom:50rpx;
			letter-spacing:2rpx;
		}
		._back{
			width:auto;
			height:100vh;
			border-top-left-radius:30rpx;
			border-top-right-radius:30rpx;
			background-color:#fbfbfc;
			margin-top:70rpx;
			padding:50rpx 30rpx 30rpx 30rpx;
			.Flex{
				display: flex;
				
				// align-items: center;
				.left{
					/deep/ .u-image{
						margin-top:40rpx;
					}
				}
				.solid{
					width: 2rpx;
					height: 78rpx;
					background-color:rgba(2,156,254,0.61);
					border: 2rpx solid rgba(2,156,254,0.61);
					display: block;
					margin:0px auto;
					margin-top:20rpx;
				}
				.listFlex{
					width:80%;
					height:55rpx;
					background-color:#fff;
					padding:20rpx 20rpx 20rpx 20rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;
					border-radius:20rpx;
					margin-left:30rpx;
					box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); /* 添加阴影效果 */
					.listLeft{
						display: flex;
						align-items: center;
						view{
							width:45rpx;
							height:45rpx;
							display: flex;
							justify-content: center;
							align-items: center;
							border-radius:50%;
							background-color:#2282fe;
							color:#fff;
						}
						text{
							margin-left:15rpx;
							font-weight:500;
							color:#333;
						}
					}
				}
				
			}
			
		}
	}
</style>